<template>
    <div class="progress" :style="'width:'+max+'%;border-radius:'+radius+'px;'">
        <div class="progress_bar" :class="'progress_'+type" :style="'width:'+value+'%;border-radius:'+radius+'px;'">
            <span style="margin-right:10px" v-if="text == 'inner'">{{value}}%</span>
        </div>       
        <div class="out_text" v-if="text == 'out'">{{value}}%</div> 
    </div>
</template>
<script>
import { ref,watch } from 'vue';
export default {
    name:'g-progress',
    props:{
        type:{
            type:String,
            default:'info'
        },
        value:{
            type:Number,
            default:50

        },
        max:{
            type:Number,
            default:100

        },
        text:{
            type:String,
            default:'inner'

        },
        radius:{
            type:Number,
            default:0
        }
    },
    setup(props){
        let max = ref(props.max);
        let type = ref(props.type);
        let value = ref(props.value);
        let text = ref(props.text);
        let radius = ref(props.radius);

        watch(()=>props.value,(val)=>{
            value.value = val;
        })

        return {
            // 变量
            text,
            max,
            value,
            type,
            radius
        }
    }
}
</script>
<style scoped>
    .progress{
        background-color: #DCDFE6;
        height: 15px;
        position: relative;
        margin: 10px 0;
    }
    .progress_bar{
        height: 100%;
        text-align: right;
        font-size: 12px;
        color: white;
        line-height: 15px;
        transition:  all .4s;
    }
    .out_text{
        font-size: 12px;
        line-height: 15px;
        color: #303133;
        position: absolute;
        top: 50%;
        right: -35px;
        transform: translateY(-50%);
    }


    .progress_info{
        background-color: #909399;
    }
    .progress_success{
        background-color: #67C23A;
    }
    .progress_warning{
        background-color: #E6A23C;
    }
    .progress_error{
        background-color: #F56C6C;
    }
</style>